<template>
  <div class="w-100 h-100">
    <containTemplete
      :title="'绩效评价及效益评估'"
      :secondTitles="['绩效评估', '', '效益评估']"
      :slotWidth="[33, 33, 33]"
    >
      <template #left>
        <div class="w-100 h-100">
          <jxpg
            :type="left_type_value"
            :year="left_year_value"
            :month="left_month_value"
          ></jxpg>
        </div>
      </template>

      <template #middle>
        <shj
            :type="middle_type_value"
            :unit="middle_unit_value"
            :hb="middle_hb_value"
            :year="middle_year_value"
            :month="middle_month_value"

        />
      </template>
      <template #right>
        <div class="w-100 h-100">
          <szdj :year="right_year_value"/>
        </div>
      </template>

      <template #left_control>
        <div>
          <div>
            <proSelect
              :optionsData="useOptions().waterWatchType"
              :defaultSelectValue="0"
              v-model:select-value="left_type_value"
              :width="200"
            >
            </proSelect>
          </div>
          <div>
            <proSelect
              :optionsData="useOptions().year()"
              :defaultSelectValue="new Date().getFullYear()-1"
              v-model:select-value="left_year_value"
              :width="100"
            >
            </proSelect>
            <proSelect
              :optionsData="
                useOptions().month.map((label, index) => ({
                  label,
                  value: index + 1,
                }))
              "
              :defaultSelectValue="1"
              v-model:select-value="left_month_value"
              :width="100"
            >
            </proSelect>
          </div>
        </div>
      </template>

      <template #middle_control>
        <div style="display: flex; justify-content: end;width: 100%;text-align: right;">
          <div>
            <div>
              <proSelect
                :optionsData="useOptions().waterWatchType"
                :defaultSelectValue="0"
                v-model:select-value="middle_type_value"
                :width="200"
              >
              </proSelect>
              <proSelect
                :optionsData="useOptions().waterUnit"
                :defaultSelectValue="0"
                v-model:select-value="middle_unit_value"
                :width="100"
              >
              </proSelect>

              <proSelect
                :optionsData="useOptions().hbData"
                :defaultSelectValue="0"
                v-model:select-value="middle_hb_value"
                :width="100"
              >
              </proSelect>
            </div>

            <div>
              <proSelect
                :optionsData="useOptions().year()"
                :defaultSelectValue="new Date().getFullYear()-1"
                v-model:select-value="middle_year_value"
                :width="100"
              >
              </proSelect>
              <proSelect
                :optionsData="
                  useOptions().month.map((label, index) => ({
                    label,
                    value: index + 1,
                  }))
                "
                :defaultSelectValue="1"
                v-model:select-value="middle_month_value"
                :width="100"
              >
              </proSelect>
            </div>
          </div>
        </div>
      </template>
      <template #right_control>
        <proSelect
            :optionsData="useOptions().year()"
            :defaultSelectValue="new Date().getFullYear()-1"
            v-model:select-value="right_year_value"
            :width="100"
        >
        </proSelect>
      </template>
    </containTemplete>
  </div>
</template>

<script setup lang="ts">
// import h_normal from '@/components/common/echart/h_nomal.vue';
import containTemplete from "@/components/project/containTemplete.vue";
import shj_swr from "./shj_swr.vue";
import szy_saq from "./szy_saq.vue";
import zdjsjzxqk from "./zdjsjzxqk.vue";
import jxkh from "./jxkh.vue";
import { useOptions } from "@/hook/useOptions";
import shj from "./shj.vue";
import szdj from "./szdj.vue";

import jxpg from "./jxpg.vue";
const echartsData = [
  {
    name: "琴断口街道",
    value: 33,
  },
  {
    name: "州头街道",
    value: 45,
  },
  {
    name: "鹦鹉街道",
    value: 65,
  },
  {
    name: "晴川街道",
    value: 87,
  },
  {
    name: "建桥街道",
    value: 80,
  },
];
const value = ref("0");
const valuejs = ref("0");

const options = [
  {
    value: "0",
    label: "污水再利用率",
  },
];
const jsoptions = [
  {
    value: "0",
    label: "规划建设",
  },
];

const left_type_value = ref(0);
const left_year_value = ref(2024);
const left_month_value = ref(1);
const left_options = [{ label: "雨量及雨水排放量监测", value: 0 }];

const middle_type_value = ref(0)
const middle_unit_value = ref(0)
const middle_hb_value = ref(0)
const middle_year_value = ref(2024)
const middle_month_value = ref(1);

const right_year_value = ref(2024)
</script>

<style scoped lang="less"></style>
